<template>
    <div class="collectionStatus">
        <div class="collect-box" v-for="(item, index) in rubbishList" :key="index">
            <!-- 标题头部 -->
            <div class="title">
                <div class="rubbish-icon">
                    <img :src="item.imgUrl" alt="">
                </div>
                <span>{{ item.name }}</span>
            </div>
            <!-- 分割线 -->
            <div class="line"></div>
            <!-- 内容区域 -->
            <div class="content">
                <!-- 收运状态 -->
                <div class="info-box">
                    <div class="content-title">收运状态：</div>
                    <div class="detail">
                        <div class="col-box" :style="{background:item.colStatus == 1 ? 'rgba(67, 207, 124, 1)':'rgba(197, 207, 224, 1)' }">
                            {{ item.colStatus == 1 ? '已收运' : '未收运' }}
                        </div>
                    </div>
                </div>
                <!-- 预计到达时间 -->
                <div class="info-box">
                    <div class="content-title">预计到达时间：</div>
                    <div class="detail">
                        {{ item.expectTime }}
                    </div>
                </div>
                <!-- 实际收运时间 -->
                <div class="info-box">
                    <div class="content-title">实际收运时间：</div>
                    <div class="detail" v-if="item.colStatus == 1">
                        {{ item.actualTime }}
                    </div>
                </div>
                <!-- 预计请收数量 -->
                <div class="info-box">
                    <div class="content-title">预计请收数量：</div>
                    <div class="detail">
                        {{ item.expectBucket }}
                    </div>
                </div>
            <!-- 实际请收数量 -->
                <div class="info-box">
                    <div class="content-title">实际请收数量：</div>
                    <div class="detail" v-if="item.colStatus == 1">
                        {{ item.expectBucket }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { reactive } from "vue"
import gan from "@/assets/images/gan.png"
import shi from "@/assets/images/shi.png"
import cw from "@/assets/images/cw.png"


const rubbishList = reactive([
    {
        id: 1,
        name: '干垃圾',
        imgUrl: gan,
        colStatus: 2,
        expectTime: '2024-08-12  07:00',
        actualTime: '2024-08-12  07:00',
        expectBucket: '0.01桶',
        actualBucket: '0.01桶',
    },
    {
        id: 2,
        name: '湿垃圾',
        imgUrl: shi,
        colStatus: 1,
        expectTime: '2024-08-12  07:00',
        actualTime: '2024-08-12  07:00',
        expectBucket: '0.01桶',
        actualBucket: '0.01桶',
    },
    {
        id: 2,
        name: '餐厨垃圾',
        imgUrl: cw,
        colStatus: 1,
        expectTime: '2024-08-12  07:00',
        actualTime: '2024-08-12  07:00',
        expectBucket: '0.01桶',
        actualBucket: '0.01桶',
    }
])


</script>

<style lang="scss" scoped>
.collectionStatus {
    height: calc(100vh - 114px - 92px - 88px - 20px - 16px)   ;
    overflow-y: scroll;

    .collect-box {
        padding: 22px 30px;
        box-sizing: border-box;
        margin-top: 16px;
        height: 480px;
        border-radius: 30px 30px 0px 0px;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px -8px 10px 4px rgba(218, 231, 245, 0.5);

        .title {
            display: flex;
            align-items: center;

            .rubbish-icon {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 44px;
                height: 44px;

                img {
                    width: 100%;
                }
            }

            span {
                font-size: 28px;
                color: rgba(51, 51, 51, 1);
                margin-left: 10px
            }
        }

        .line {
            width: 100%;
            height: 1px;
            background: rgba(239, 239, 239, 1);
            margin: 22px 0 28px 0;
        }

        .content {
            margin-left: 14px;
            .info-box {
                font-size: 26px;
                display: flex;
                align-items: center;
                margin-bottom: 15px;

                .content-title {
                    width: 200px;
                    color:rgba(128, 128, 128, 1);
                    text-align: right;
                }

                .detail {
                    .col-box {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        width: 108px;
                        height: 48px;
                        font-size: 24px;
                        color: rgba(255, 255, 255, 1);
                        background: rgba(67, 207, 124, 1);
                    }
                }
            }
        }
    }
}
</style>